<template>
  <!-- 资金明细(流水) -->
  <div class="home-page-container">
    <el-card style="margin:0 0 10px 0">
      <mer-search :searchConfig="formConfig" :searchBar="searchBar"
        @search="search"
        @reset="reset(initQuery)"
        @changeTime="(value,model)=>changeTime(value,'searchBar', 'tradingTimeStart', 'tradingTimeEnd')"
        :loading="tableLoading">
        <template slot="account">
          <el-select v-if="showMultipleAccount" v-model="searchBar.accountCode" :clearable="false" @change="changeAccount">
            <el-option v-for="(item,key) in accountOptions" :key="key" :label="item.accountName" :value="item.accountCode"></el-option>
          </el-select>
          <span v-else class="account-text">{{ accountName || ''}}</span>
        </template>
        <template slot="handler">
          <el-button size="mini" @click="download" icon="el-icon-download">导出</el-button>
        </template>
      </mer-search>
    </el-card>
    <el-card style="margin: 20px 0 10px" shadow="never">
      <div class="sum-wrapper">
        <div class="sum-item sum-item-1">
          <div class="value">{{sumInfo.incomeCount || 0}}</div>
          <div class="label">收入(笔)</div>
        </div>
        <div class="sum-item sum-item-2">
          <div class="value">{{sumInfo.income || 0}}</div>
          <div class="label">收入金额(元)</div>
        </div>
        <div class="sum-item sum-item-3">
          <div class="value">{{sumInfo.expenditureCount || 0}}</div>
          <div class="label">支出(笔)</div>
        </div>
        <div class="sum-item sum-item-4">
          <div class="value">{{sumInfo.expenditure || 0}}</div>
          <div class="label">支出金额(元)</div>
        </div>
      </div>
    </el-card>
    <el-card>
      <mer-table :loading="tableLoading"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :pagination="pagination"
        @SizeChange="handleSizeChange"
        @PageChange="pageChange">
      </mer-table>
    </el-card>
  </div>
</template>
<script>
import listPage from '@/mixins/listPage'
import queryMix from '@/views/finance/mixins/query';
import { getQueryTradeTypeApi, getDetailSummaryApi, getDetailListApi, downloadDetailsApi, getAllD0AccountApi } from '@/api/finance'

// 查询表单配置
let formConfig = [
  { label: '当前账户', type:'slot', slotName: 'account'},
  { label: '交易时间', type: 'date', modelName: 'tradeTime', model: '', dateType: 'datetimerange', format: 'yyyy-MM-dd HH:mm:ss', clearable:false },
  { label: '交易类型', type: 'select', modelName: 'tradingType', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'name', selectValue: 'code' }
]
// 表格参数配置
let tableConfig = [
  { label: '交易时间', prop: 'tradingTime', fixed: 'left', width: 150 },
  { label: '交易类型', prop: 'tradingTypeName' },
  { label: '交易方向', prop: 'tradingDirectionName' },
  { label: '交易金额(元)', prop: 'tradingAmount',width: 136 },
  { label: '交易后余额(元)', prop: 'balance',width: 136 },
  { label: '对应订单号', prop: 'orderNo',width: 136 },
  { label: '系统流水号', prop: 'serialNum',width: 136 },
  { label: '交易状态', prop: 'tradingStatusName'},
  { label: '备注', prop: 'remark', width: 210 }
]
export default {
  name: 'finance_withdrawDetail',
  mixins:[ listPage, queryMix ],
  data(){
    return{
      tradeTime:'',
      formConfig: formConfig,
      tableConfig: tableConfig,
      sumInfo: {
        incomeCount: 0,
        income: 0,
        expenditureCount: 0,
        expenditure: 0
      },
      accountCode:'',   // 当前生效账户code
      accountName:'',    // 当前生效账户name
      accountOptions: []    //多账号容器
    }
  },
  created(){
    this.initPage()
  },
  computed:{
    showMultipleAccount(){
      return this.accountName && this.accountOptions?.length > 1 
    }
  },
  methods:{
    initPage () {
      this.getAllAccount()
    },
    // 设置默认查询条件，暂无默认时间间隔
    initQuery () {
      this.tradeTime = ''
      this.initTime('tradeTime', 0, 'searchBar', true, 'tradingTimeStart', 'tradingTimeEnd')
      const { tradeTime } = this
      const initObj = { tradeTime: [tradeTime, null] }
      this.setSearchConfig(initObj)
      this.$set(this.searchBar,'accountCode',this.accountCode)
      // 重置默认设置账户类型为当前生效账户
      if(this.showMultipleAccount){
        this.changeAccount(this.accountCode)
      }
    },
    // 获取查询条件：交易类型
    async getQueryProps (accountCode) {
      const { code, result = [] } = await getQueryTradeTypeApi({accountCode})
      if(code !== 200) return
      const initObj = { tradingType: result }
      this.setSearchConfig(initObj)
    },
    changeAccount(val){
      // 账户切换,交易类型清空
      this.$set(this.searchBar,'tradingType','')
      const initObj = { tradingType: [] }
      this.setSearchConfig(initObj)
      this.getQueryProps(val)
    },
    download () {
      this.downloadFile(downloadDetailsApi,'资金明细')
    },
    // 获取当前商户D0账户
    async getAllAccount(){
      try{
        // 返回 account(账户类型) valid（是否当前生效的账户,生效账户只有一个） true生效中
        const { code, result = [] } = await getAllD0AccountApi()
        if(code !== 200) return
        this.accountOptions = result || []
        let tempAccount = result.filter(item => item.valid === true)
        if(tempAccount.length){
          // 筛选出生效账户
          const {accountName, accountCode} = tempAccount[0]
          this.accountCode = accountCode
          this.accountName = accountName
          //设置默认选中值
          this.$set(this.searchBar,'accountCode',accountCode)
        }
      }catch(err){
        console.log(err)
      }finally{
        this.initQuery()
        // this.initList(getDetailListApi,true,getDetailSummaryApi,{accountCode:this.accountCode})
        // 无生效账户,不去请求任何接口
        if(this.accountName){
          this.getQueryProps(this.accountCode)
          this.initList(getDetailListApi,true,getDetailSummaryApi)
        }else{
          this.$message.warning('无生效账户')
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.home-page-container{
  margin-top: 20px;
}
.total-wrapper{
  margin: 15px 0px;
  .total-item{
    margin-right: 10px;
  }
}
.account-text{
  font-weight: 600;
}
</style>